<template>
  <div class="global-nav">
    <div class="vertical-bar" :style="`top: ${barOffset}px`"></div>
    <NavButton
      @click="privateLetter"
      :selected="privateLetterSelected"
      src="/src/assets/icon/youxi.png"
      msg="添加" />
    <NavButton
      v-for="(item, index) of privateLetterList"
      @click="navChat(item, index)"
      :selected="item.selected"
      :key="item.id"
      :src="item.src"
      :msg="item.name" />
    <div class="horizontal-division"></div>
    <NavButton
      v-for="(item, index) of userServerList"
      @click="navServer(item, index)"
      :selected="item.selected"
      :key="item.id"
      :src="item.src"
      :msg="item.name" />
    <NavButton
      @click="navAdd"
      :selected="navAddSelected"
      src="/src/assets/icon/jia.png"
      msg="添加" />
    <NavButton
      @click="navFind"
      :selected="navFindSelected"
      src="/src/assets/icon/shanliang.png"
      msg="发现" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import router from "@/router";
import NavButton from "@/components/other/NavButton.vue";
import { UserServer, UserServerService } from "@/api";

const privateLetterSelected = ref(true);
const navAddSelected = ref(false);
const navFindSelected = ref(false);

interface NavButtonData {
  id: number;
  name: string;
  src: string;
  selected: boolean;
}

const privateLetterList: NavButtonData[] = reactive([
  {
    id: 1,
    name: "私信",
    src: "/src/assets/icon/yonghufwq.png",
    selected: false,
  },
]);
const userServerList: NavButtonData[] = reactive([]);

/**
 * 加载用户服务器列表
 */
const loadUserServerList = async () => {
  const res = await UserServerService.findByLoginUser();
  if (res.code === 100) {
    const data = res.data as UserServer[];
    data.forEach((item: UserServer) => {
      userServerList.push({
        id: item.serverId,
        name: item.name,
        src: item?.headImage ?? "/src/assets/icon/yonghufwq.png",
        selected: false,
      });
    });
  }
};

function clearSelectedStatus() {
  privateLetterList.forEach((item) => (item.selected = false));
  userServerList.forEach((item) => (item.selected = false));
  navAddSelected.value = false;
  navFindSelected.value = false;
  privateLetterSelected.value = false;
}

// 初始偏移
const initOffset = 16;
// 分隔符偏移
const separateOffset = 83;
// 间隔
const interval = 65;
// 图形条偏移
const barOffset = ref(initOffset);

/**
 * 私信点击事件
 * @param privateLetter
 * @param index
 */
function navChat(privateLetter: NavButtonData, index: number) {
  barOffset.value = (index + 1) * interval + initOffset;
  clearSelectedStatus();
  privateLetter.selected = true;
  router.push({
    name: "privateLetterOne",
    params: { privateId: privateLetter.id },
  });
}

/**
 * 服务器点击事件
 * @param userServer
 * @param index
 */
function navServer(userServer: NavButtonData, index: number) {
  barOffset.value =
    privateLetterList.length * interval +
    initOffset +
    index * interval +
    separateOffset;
  clearSelectedStatus();
  userServer.selected = true;
  router.push({
    name: "userServer",
    params: { serverId: userServer.id },
  });
}

/**
 *  私信管理按钮点击事件
 */
function privateLetter() {
  barOffset.value = initOffset;
  clearSelectedStatus();
  privateLetterSelected.value = true;
  router.push({
    name: "privateLetter",
  });
}

/**
 * 添加按钮点击事件
 */
function navAdd() {
  barOffset.value =
    privateLetterList.length * interval +
    initOffset +
    userServerList.length * interval +
    separateOffset;
  clearSelectedStatus();
  navAddSelected.value = true;
}

/**
 * 发现按钮点击事件
 */
function navFind() {
  barOffset.value =
    privateLetterList.length * interval +
    initOffset +
    ((userServerList.length + 1) * interval + separateOffset);
  clearSelectedStatus();
  navFindSelected.value = true;
}

/**
 * 初始化
 */
function init() {
  // 加载用户服务器列表
  loadUserServerList();
}
init();
</script>

<style scoped>
.global-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.horizontal-division {
  height: 1px;
  width: 55%;
  border: 1px solid #e1e1e1;
  margin: 8px auto;
}

.vertical-bar {
  width: 1px;
  height: 32px;
  /*边框*/
  border-radius: 2px;
  border: 3px solid #00ff00;
  /*定位*/
  position: absolute;
  left: -2px;
  /*过度*/
  transition: all 0.3s ease-in-out;
}
</style>
